import React from 'react';
import { useIntl } from 'umi';
import {
  Button,
  Col,
  Drawer,
  Select,
  Form,
  Input,
  Card,
  Row,
  Cascader,
} from 'antd';
import style from './index.less';

const GlobalPayments: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  return (
    <div className={style.PaymentGlobalboss}>
      <div className={style.PaymentGlobalform}>
        <Card
          // title="全球付款"
          title={t('menu.GlobalPayment')}
          extra={<a href="#">More</a>}
          style={{ width: '100%', height: '100%', textAlign: 'left' }}
        >
          <Form>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="name"
                  // label="子商户名称"
                  label={t('form.Submerchantname')}
                  rules={[
                    {
                      required: true,
                      // message: "请输入账户号",
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="url"
                  // label="付款方账户名称"
                  label={t('form.PayerAccountName')}
                  rules={[
                    {
                      required: true,
                      message: '请输入账户名称',
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="Identification"
                  // label="付款币种"
                  label={t('form.paymentCurrency')}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="type"
                  // label="收款方账户"
                  label={t('form.Payeeaccount')}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: '100%',
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="accountCountry"
                  // label="汇率"
                  label={t('form.Exchangerate')}
                  rules={[
                    {
                      required: true,
                      // message: "请输入归属国家",
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: '100%',
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="currency"
                  // label="买入金额"
                  label={t('form.Purchaseamount')}
                  rules={[
                    {
                      required: true,
                      message: '请输入选择账户币种',
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: '100%',
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="city"
                  // label="汇款用途"
                  label={t('form.PurposeRemittance')}
                  rules={[
                    {
                      required: true,
                      message: '请输入开户银行所在省市',
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="CardType"
                  // label="汇款附言"
                  label={t('form.PostscriptRemittance')}
                  rules={[
                    {
                      required: true,
                      // message: "请输入卡折类型",
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: '100%',
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="largeAmount"
                  label={t('form.AccountRemitter')}
                  // label="汇款方账户号"
                >
                  <Input
                    style={{
                      width: '100%',
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="swiftcode"
                  label={t('form.CollectionCurrency')}
                  // label="收款币种"
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="transferAmount"
                  // label="锁定方"
                  label={t('form.LockingParty')}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="detailAddress"
                  // label="卖出金额"
                  label={t('form.Salesamount')}
                >
                  <Input
                    style={{
                      width: '100%',
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Row gutter={16}>
            <Button type="primary">
              {/* 提交 */}
              {t('form.Submit')}
            </Button>
          </Row>
        </Card>
      </div>
    </div>
  );
};

export default GlobalPayments;
